// 将来要的效果:
// 1. Message({ type: 'success', text: '登录成功' })
// 2. Message.success('登录成功')
// 3. Message.error('登录失败')
import { h, render } from 'vue'
import XtxMessage from './message.vue'

type Params = {
  type: 'success' | 'error' | 'warning'
  text: string
  duration?: number
}

// 准备一个div, 这个div专门用于存放显示隐藏的弹框
// 1. 显示, 往 一个 专门的 div 中显示
// 2. 隐藏, 将 这个 专门的 div 内容销毁
// 往body中新增一个盒子
// 目前的效果: 如果有多个提示框, 后面的提示框会将前面的覆盖 => 同时只能一个提示框
// 只要这个js被引入了, 里面的代码就会执行
const divContainer = document.createElement('div')
divContainer.setAttribute('class', 'xtx-message-container')
document.body.appendChild(divContainer)

let timer: number = -1

function Message({ type, text, duration = 2000 }: Params) {
  // 1. 创建虚拟dom
  const vNode = h(XtxMessage, { type, text })
  // 2. 动态render
  render(vNode, divContainer)

  // 3. 开一个延时器, 到时间让他隐藏
  clearTimeout(timer)
  timer = window.setTimeout(() => {
    // 删除虚拟dom
    render(null, divContainer)
  }, duration)
}

Message.success = function (text: string, duration = 2000) {
  Message({
    type: 'success',
    text,
    duration,
  })
}

Message.error = function (text: string, duration = 2000) {
  Message({
    type: 'error',
    text,
    duration,
  })
}

Message.warning = function (text: string, duration = 2000) {
  Message({
    type: 'warning',
    text,
    duration,
  })
}

export default Message
